import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class KeyboardPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _KeyboardPage();
  }
}

class KeyItem {
  String key;
  double margin;
  int length;

  KeyItem({required this.key, required this.margin, this.length = 50});
}

class _KeyboardPage extends State<KeyboardPage> {
  var line1List = [
    KeyItem(key: 'Esc', margin: 60),
    KeyItem(key: 'F1', margin: 10),
    KeyItem(key: 'F2', margin: 10),
    KeyItem(key: 'F3', margin: 10),
    KeyItem(key: 'F4', margin: 60),
    KeyItem(key: 'F5', margin: 10),
    KeyItem(key: 'F6', margin: 10),
    KeyItem(key: 'F7', margin: 10),
    KeyItem(key: 'F8', margin: 60),
    KeyItem(key: 'F9', margin: 10),
    KeyItem(key: 'F10', margin: 10),
    KeyItem(key: 'F11', margin: 10),
    KeyItem(key: 'F12', margin: 10),
  ];
  var line3List = [
    KeyItem(key: 'Tab', length: 110, margin: 10),
    KeyItem(key: 'Q', margin: 10),
    KeyItem(key: 'W', margin: 10),
    KeyItem(key: 'E', margin: 10),
    KeyItem(key: 'R', margin: 10),
    KeyItem(key: 'T', margin: 10),
    KeyItem(key: 'Y', margin: 10),
    KeyItem(key: 'U', margin: 10),
    KeyItem(key: 'I', margin: 10),
    KeyItem(key: 'O', margin: 10),
    KeyItem(key: 'P', margin: 10),
    KeyItem(key: '[', margin: 10),
    KeyItem(key: ']', margin: 10),
    KeyItem(key: '\\', length: 80, margin: 10),
  ];
  var line2List = [
    KeyItem(key: '~', margin: 10),
    KeyItem(key: '1', margin: 10),
    KeyItem(key: '2', margin: 10),
    KeyItem(key: '3', margin: 10),
    KeyItem(key: '4', margin: 10),
    KeyItem(key: '5', margin: 10),
    KeyItem(key: '6', margin: 10),
    KeyItem(key: '7', margin: 10),
    KeyItem(key: '8', margin: 10),
    KeyItem(key: '9', margin: 10),
    KeyItem(key: '0', margin: 10),
    KeyItem(key: '-', margin: 10),
    KeyItem(key: '+', margin: 10),
    KeyItem(key: 'backspace', length: 120, margin: 10),
  ];
  var line4List = [
    KeyItem(key: 'Caps Lock', length: 120, margin: 10),
    KeyItem(key: 'A', margin: 10),
    KeyItem(key: 'S', margin: 10),
    KeyItem(key: 'D', margin: 10),
    KeyItem(key: 'F', margin: 10),
    KeyItem(key: 'G', margin: 10),
    KeyItem(key: 'H', margin: 10),
    KeyItem(key: 'J', margin: 10),
    KeyItem(key: 'K', margin: 10),
    KeyItem(key: 'L', margin: 10),
    KeyItem(key: ';', margin: 10),
    KeyItem(key: '\'', margin: 10),
    KeyItem(key: 'Enter', length: 120, margin: 10),
  ];
  var line5List = [
    KeyItem(key: 'Shift', length: 140, margin: 10),
    KeyItem(key: 'Z', margin: 10),
    KeyItem(key: 'X', margin: 10),
    KeyItem(key: 'C', margin: 10),
    KeyItem(key: 'V', margin: 10),
    KeyItem(key: 'B', margin: 10),
    KeyItem(key: 'N', margin: 10),
    KeyItem(key: 'M', margin: 10),
    KeyItem(key: '<', margin: 10),
    KeyItem(key: '>', margin: 10),
    KeyItem(key: '/', margin: 10),
    KeyItem(key: 'Shift', length: 170, margin: 10),
  ];
  var line6List = [
    KeyItem(key: 'Ctrl', length: 90, margin: 10),
    KeyItem(key: 'Win', length: 80, margin: 10),
    KeyItem(key: 'Alt', length: 80, margin: 10),
    KeyItem(key: '', length: 300, margin: 10),
    KeyItem(key: 'Alt', length: 80, margin: 10),
    KeyItem(key: 'Fn', length: 80, margin: 10),
    KeyItem(key: 'Win', length: 80, margin: 10),
    KeyItem(key: 'Ctrl', length: 80, margin: 10),
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: line1List.map((it) {
                return Padding(
                  padding: EdgeInsets.only(right: it.margin),
                  child: Container(
                    height: it.length.toDouble(),
                    width: 50,
                    color: Colors.redAccent,
                    child: Center(child: Text(it.key)),
                  ),
                );
              }).toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: line2List.map((it) {
                return Padding(
                  padding: EdgeInsets.only(right: it.margin),
                  child: Container(
                    height: 50,
                    width: it.length.toDouble(),
                    color: Colors.orangeAccent,
                    child: Center(
                      child: Text(it.key),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: line3List.map((it) {
                return Padding(
                  padding: EdgeInsets.only(right: it.margin),
                  child: Container(
                    height: 50,
                    width: it.length.toDouble(),
                    color: Colors.pinkAccent,
                    child: Center(
                      child: Text(it.key),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: line4List.map((it) {
                return Padding(
                  padding: EdgeInsets.only(right: it.margin),
                  child: Container(
                    height: 50,
                    width: it.length.toDouble(),
                    color: Colors.blueAccent,
                    child: Center(
                      child: Text(it.key),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: line5List.map((it) {
                return Padding(
                  padding: EdgeInsets.only(right: it.margin),
                  child: Container(
                    height: 50,
                    width: it.length.toDouble(),
                    color: Colors.purpleAccent,
                    child: Center(
                      child: Text(it.key),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: line6List.map((it) {
                return Padding(
                  padding: EdgeInsets.only(right: it.margin),
                  child: Container(
                    height: 50,
                    width: it.length.toDouble(),
                    color: Colors.cyanAccent,
                    child: Center(
                      child: Text(it.key),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}
